<template>
  <div id="bannedUsersList">
    <!-- 上部搜索条件组件 -->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button type="warning" icon="el-icon-plus" plain @click="add">
        新增
      </el-button>
    </div>
    <!-- 下部table -->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      max-height="490"
      ref="table"
    >
      <el-table-column type="index" label="序号" min-width="50" align="center">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="userInfo.userName"
        label="昵称"
        min-width="60"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="userInfo.dpAccount"
        label="大鹏号"
        min-width="70"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="userInfo.dateAdded"
        label="注册时间"
        min-width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="failPosts"
        label="未通过内容数"
        min-width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="numberOfProhibitions"
        label="被禁言次数"
        min-width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="state" label="禁言状态" min-width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.state">{{
            scope.row.state | filterName('banned_state')
          }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="禁言开始时间" min-width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.startTime">{{ scope.row.startTime }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="禁言结束时间" min-width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.endTime">{{ scope.row.endTime }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column label="当前禁言时长" min-width="70" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.forbidden === '-1'">永久禁言</span>
          <span v-else-if="scope.row.forbidden"
            >{{ scope.row.forbidden }}天</span
          >
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="reason"
        label="禁言原因"
        min-width="70"
        align="center"
      >
        <!-- <template slot-scope="scope">
          <span>{{  }}</span>
        </template> -->
      </el-table-column>

      <el-table-column
        prop="reviewer.userName"
        label="审核人"
        min-width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" width="190" style="display：block">
        <template slot-scope="scope">
          <el-button
            @click="Banned(scope.row)"
            type="text"
            v-if="scope.row.state === 'LIFTABAN'"
          >
            禁言
          </el-button>
          <el-button
            @click="notBanned(scope.row.userInfo.dpAccount)"
            type="text"
            v-else
          >
            解除禁言
          </el-button>
          <el-button @click="notPassContentList(scope.row)" type="text">
            未通过内容列表
          </el-button>
          <el-button @click="Bannedhistory(scope.row)" type="text">
            禁言历史
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>

    <!-- 增加禁言用户弹框 -->
    <el-dialog
      v-if="addbannedUser"
      :title="isEdit ? '新增禁言用户' : '禁言用户'"
      :visible.sync="addbannedUser"
      width="35%"
      @close="closeDialog"
    >
      <el-form
        ref="addbannedUserform"
        :model="addbannedUserform"
        size="mini"
        :rules="rules"
      >
        <el-form-item label="用户大鹏号" prop="dpAccount" v-if="this.isEdit">
          <el-input
            v-model="addbannedUserform.dpAccount"
            size="mini"
            style="width:150px"
          ></el-input>
        </el-form-item>

        <el-form-item label="禁言时长" prop="forbidden">
          <el-radio-group
            v-model="addbannedUserform.forbidden"
            @change="clearValue"
            type="vertical"
            class="reasons"
          >
            <div v-for="(item, index) of shutTimeArray" :key="index">
              <el-radio :label="item.dictValue">
                {{ item.dictLabel }}
                <div style="display:inline-block" v-if="item.dictValue == '0'">
                  <el-input
                    :disabled="addbannedUserform.forbidden !== '0'"
                    clearable
                    size="mini"
                    placeholder=""
                    v-model="customShutTime"
                    style="width:80px"
                    @input="changeInput"
                    maxlength="7"
                  >
                  </el-input>
                  <span>天</span>
                </div>
              </el-radio>
            </div>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="禁言原因" prop="reason">
          <el-radio-group v-model="addbannedUserform.reason" class="reasons">
            <div>
              <el-radio label="内容违规"></el-radio>
            </div>
            <div>
              <el-radio label="谩骂他人"></el-radio>
            </div>
            <div>
              <el-radio label="发布广告"></el-radio>
            </div>
            <div>
              <el-radio label="恶意刷屏"></el-radio>
            </div>
            <div>
              <el-radio label="个人信息携带广告"
                >个人信息携带广告（头像、昵称、个性签名将设为系统默认）</el-radio
              >
            </div>
            <div class="customShutTime">
              <el-radio label="其他"></el-radio>
              <el-input
                style="margin-top:15px"
                :disabled="addbannedUserform.reason != '其他'"
                v-model="resonArea"
                placeholder="请输入禁言原因（必填）"
                type="textarea"
                maxlength="50"
                show-word-limit
              ></el-input>
            </div>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addBan('addbannedUserform')"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 禁言历史弹框 -->
    <el-dialog title="禁言历史" :visible.sync="bannedHistory" width="70%">
      <div style="padding-bottom: 30px;">
        <el-table :data="bannedlishi" border>
          <el-table-column
            property="forbidden"
            label="禁言时长"
            min-width="200"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.forbidden === '-1'">永久禁言</span>
              <span v-else-if="scope.row.forbidden"
                >{{ scope.row.forbidden }}天</span
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            property="reason"
            label="禁言原因"
            min-width="200"
          ></el-table-column>
          <el-table-column
            property="startTime"
            label="禁言开始时间"
            min-width="200"
          ></el-table-column>
          <el-table-column
            property="endTime"
            label="禁言结束时间"
            min-width="200"
          ></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSearchList,
  bannedhistoryList,
  bannedUser,
  dissemination
} from '@/api/commentCheck/bannedUsers' //接口
import { sysNormalDisable } from '@utils/dictionariesFunc'
import topSearch from '@component/commentCheck/bannedUsers/topSearch' //上部搜索条件
import { saveScrollMixins } from '@/mixins/saveScroll'
const templates = {
  LIFTABAN: { templateName: '未禁言' },
  FORBIDDENWORDS: { templateName: '禁言中' }
}
export default {
  name: 'bannedUsers',
  msg: '评论审核-用户禁言-列表页',
  mixins: [saveScrollMixins],
  components: {
    topSearch
  },
  async mounted() {
    await sysNormalDisable('banned_state', 'banned_state')
    this.shutTimeArray = await sysNormalDisable(
      'banned_duration',
      'banned_duration'
    )
    this.searchList()
    this.setTableScrollHeight()
  },
  filters: {
    templateFilter(type) {
      return templates[type].templateName
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  data() {
    return {
      scrollTop: '',
      shutTimeArray: [],
      loading: true,
      total: 0,
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        // 搜索条件
        compare: '', //当前禁言时长
        dpAccount: '', //大鹏号
        endTime: '', //结束时间
        numberOfProhibitions: '', //被禁言次数
        reviewer: '', //审核人
        sort: 'DESC', //审核不通过次数排序
        startTime: '', // 开始时间
        state: '' //禁言状态
      },
      addbannedUser: false, //新增禁言用户弹框
      bannedHistory: false, //禁言历史弹框
      bannedlishi: [], //禁言历史内容
      addbannedUserform: {
        //禁言用户表单
        dpAccount: '',
        forbidden: '',
        reason: ''
      },
      customShutTime: null, //其他天数
      resonArea: null, //禁言原因

      isEdit: false,

      //表单校验
      rules: {
        dpAccount: [
          { required: true, message: '请输入大鹏号', trigger: 'blur' }
        ],
        forbidden: [
          { required: true, message: '请选择禁言时长', trigger: 'change' }
        ],
        reason: [
          { required: true, message: '请选择禁言原因', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    //获取列表
    searchList() {
      this.loading = true
      let obj = { ...this.formInline }
      delete obj.shutTime
      let params = { ...this.searchParams, ...obj }
      getSearchList(params, (response) => {
        this.tableData = response.rows
        this.total = response.total
        this.loading = false
      })
    },

    //禁言历史按钮
    Bannedhistory(row) {
      if (row.numberOfProhibitions === 0) {
        this.$message({
          type: 'warning',
          message: '无禁言历史记录！'
        })

        return
      }

      this.bannedHistory = true
      bannedhistoryList(row.userInfo.dpAccount, (res) => {
        this.bannedlishi = res
      })
    },

    //解除禁言按钮
    notBanned(dp) {
      this.$confirm('确定解除禁言吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '点错了',
        type: 'warning'
      })
        .then(() => {
          dissemination(dp, (response) => {
            this.searchList()
          })
        })
        .catch((err) => {
          this.$message({
            type: 'warning',
            message: '已取消'
          })
        })
    },

    closeDialog() {
      this.$refs.addbannedUserform.resetFields()
      this.customShutTime = ''
      this.resonArea = ''
    },

    //取消按钮
    cancel() {
      this.addbannedUser = false
      this.addbannedUserform = {}
      this.customShutTime = ''
      this.resonArea = ''
    },

    //禁言按钮
    Banned(row) {
      this.addbannedUser = true
      this.isEdit = false
      this.thirdParty = row.userInfo.dpAccount
    },
    clearValue(val) {
      if (val !== 0) {
        this.customShutTime = ''
      }
    },
    //新增禁言确定按钮
    addBan(addbannedUserform) {
      const self = this
      this.$refs[addbannedUserform].validate((valid) => {
        if (valid) {
          let params = { ...this.addbannedUserform }
          if (!this.isEdit) {
            params.dpAccount = this.thirdParty
          }
          if (this.addbannedUserform.forbidden == '0') {
            params.forbidden = this.customShutTime
          } else {
            this.customShutTime = ''
          }
          if (params.reason === '个人信息携带广告') {
            params.clear = true
          }
          if (params.reason === '其他') {
            params.reason = this.resonArea
          }
          bannedUser(params, (response) => {
            this.searchList()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            self.$refs['addbannedUserform'].resetFields()
          })
          this.addbannedUser = false //关闭弹框
          this.customShutTime = ''
          this.resonArea = ''
          this.addbannedUserform = {}
        }
      })
    },

    //新增禁言按钮
    add(row) {
      this.addbannedUser = true
      this.isEdit = true
    },

    // 未通过内容列表
    notPassContentList(item) {
      this.$router.push({
        name: 'wh:bannedUsers:unpassList',
        query: { dpAccount: item.userInfo.dpAccount }
      })
      this.setTableScrollHeight()
    },

    changeInput() {
      let pattern = /^[1-9][0-9]*$/
      if (!pattern.test(this.customShutTime)) {
        this.customShutTime = ''
      }
    },

    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>

<style lang="less" scoped>
#bannedUsersList {
  :deep(.el-radio-group) {
    width: 80% !important;
  }
}
.reason {
  padding: 20px 0 20px 0;
}
.qt {
  padding-top: 10px;
  input {
    width: 50px;
  }
}

.forbidden {
  padding-bottom: 10px;
}

.reasons {
  & > div {
    margin: 15px 0 8px 0;
  }
}

.customShutTime {
  padding-bottom: 10px;
}
</style>
